<template>
  <div>
    <div style="margin-bottom: 10px">
      <div style="display: flex; align-items: center; grid-gap: 10px">
        <div class="card" style="flex: 1; padding: 20px; display: flex; align-items: center; grid-gap: 20px">
          <img style="width: 80px; height: 80px" src="@/assets/imgs/shop_icon.png" alt="">
          <div style="flex: 1; font-size: 20px">
            <div style="margin-bottom: 10px">入驻宠物店</div>
            <div style="font-weight: bold">{{ data.count.petShopCount || 0 }}</div>
          </div>
        </div>
        <div class="card" style="flex: 1; padding: 20px; display: flex; align-items: center; grid-gap: 20px">
          <img style="width: 80px; height: 80px" src="@/assets/imgs/pet_icon.png" alt="">
          <div style="flex: 1; font-size: 20px">
            <div style="margin-bottom: 10px">售卖宠物</div>
            <div style="font-weight: bold">{{ data.count.petCount || 0  }}</div>
          </div>
        </div>
        <div class="card" style="flex: 1; padding: 20px; display: flex; align-items: center; grid-gap: 20px">
          <img style="width: 80px; height: 80px" src="@/assets/imgs/post_icon.png" alt="">
          <div style="flex: 1; font-size: 20px">
            <div style="margin-bottom: 10px">宠物帖子</div>
            <div style="font-weight: bold">{{ data.count.postCount || 0  }}</div>
          </div>
        </div>
        <div class="card" style="flex: 1; padding: 20px; display: flex; align-items: center; grid-gap: 20px">
          <img style="width: 80px; height: 80px" src="@/assets/imgs/pet_amount_icon.png" alt="">
          <div style="flex: 1; font-size: 20px">
            <div style="margin-bottom: 10px">宠物销售额</div>
            <div style="font-weight: bold">{{ (data.count.petSaleAmount || 0).toFixed(2)  }}</div>
          </div>
        </div>
        <div class="card" style="flex: 1; padding: 20px; display: flex; align-items: center; grid-gap: 20px">
          <img style="width: 80px; height: 80px" src="@/assets/imgs/goods_amount_icon.png" alt="">
          <div style="flex: 1; font-size: 20px">
            <div style="margin-bottom: 10px">用品销售额</div>
            <div style="font-weight: bold">{{ (data.count.goodsSaleAmount || 0).toFixed(2)  }}</div>
          </div>
        </div>
      </div>
    </div>

    <div class="card" style="padding: 20px; margin-bottom: 10px">
      <div style="height: 400px" id="line"></div>
    </div>

    <div style="margin-bottom: 10px; display: flex; align-items: center; grid-gap: 10px">
      <div class="card" style="flex: 1; padding: 20px; height: 400px" id="pie"></div>
      <div class="card" style="flex: 1; padding: 20px; height: 400px" id="bar"></div>
    </div>
  </div>
</template>

<script setup>
  import { reactive,onMounted } from 'vue'
  import request from '@/utils/request.js'
  import { ElMessage } from 'element-plus'
  import * as echarts from 'echarts'

  // 折线图
  const lineOption = {
    title: {
      text: '近7天销售额折线图',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      left: 'left'
    },
    xAxis: {
      type: 'category',
      data: []
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [],
        type: 'line',
        smooth: true,
        areaStyle: {
          opacity: 0.8, // 阴影的透明度
          color: 'rgb(185,190,255)' // 阴影的颜色和透明度
        },
        markPoint: {
          data: [
            { type: 'max', name: 'Max' },
            { type: 'min', name: 'Min' }
          ]
        },
        markLine: {
          data: [{ type: 'average', name: 'Avg' }]
        }
      },
    ]
  }

  // 饼状图
  const pieOption = {
    title: {
      text: '各类型宠物数量饼状图',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        type: 'pie',
        center: ['50%', '60%'],
        radius: '65%',
        data: [],
        label: {
          show: true,
          formatter(param) {
            return param.name + ' (' + param.percent + '%)';
          }
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }

  // 柱状图
  const barOption = {
    title: {
      text: '各宠物店销售额柱状图',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      left: 'left'
    },
    grid: {
      left: '15%',
      bottom:'15%'
    },
    xAxis: {
      type: 'category',
      data: [],
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [],
        type: 'bar',
        smooth: true,
        itemStyle: {
          normal: {
            color: function(params) { // 根据索引返回对应的颜色
              let colorList = ['#ffaa2e','#32C5E9','#fa4c4c','#08b448','#FFDB5C','#ff9f7f','#fb7293','#E062AE','#E690D1','#e7bcf3']
              return colorList[params.dataIndex];
            }
          }
        },
      }
    ]
  }

  // 等页面所有元素加载完成后，再加载echarts图表
  onMounted(() => {
    // 1.加载近7天销售额的折线图
    let lineDom = document.getElementById('line');
    let lineChart = echarts.init(lineDom);
    request.get("/count/sale/line").then(res => {
      if (res.code === '200') {
        lineOption.xAxis.data = res.data.xtimeData
        lineOption.series[0].data = res.data.ysaleData
        lineChart.setOption(lineOption)
      } else {
        ElMessage.error(res.msg)
      }
    })

    // 2.加载各类型宠物数量饼状图
    let pieDom = document.getElementById('pie');
    let pieChart = echarts.init(pieDom);
    request.get("/count/petTypePie").then(res => {
      if (res.code === '200') {
        pieOption.series[0].data = res.data
        pieChart.setOption(pieOption)
      } else {
        ElMessage.error(res.msg)
      }
    })

    // 3.加载各宠物店销售额柱状图
    let barDom = document.getElementById('bar');
    let barChart = echarts.init(barDom)
    request.get("/count/sale/bar").then(res => {
      if (res.code === '200') {
        barOption.xAxis.data = res.data.xshopNameData
        barOption.series[0].data = res.data.ysaleData
        barChart.setOption(barOption)
      } else {
        ElMessage.error(res.msg)
      }
    })

  })


  const data = reactive({
    user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
    count: {
      petShopCount: 0,
      petCount: 0,
      postCount: 0,
      petSaleAmount: 0,
      goodsSaleAmount: 0
    }
  })


  request.get("/count/top").then(res => {
    if (res.code === '200') {
      data.count = res.data
    } else {
      ElMessage.error(res.msg)
    }
  })

</script>